<template>
	<div class="">
		<!--应用编排-->
		
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml 
				:data="pageData"
				ref="listTpml"
				@onCommand="listCommand"
				></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			<addFZDialog ref="addFZDialog"  @addSucess="refresh"></addFZDialog>
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	import listTpml from "@/view/components/listTmpl";
	
	import addFZDialog from "@/view/components/dialog/addFZDialog";
	
	import {list,deleteOrchestrate} from "@/service/swagger/OrchestrateController";
//	
//	import { fuzaiStatusFilter } from '@/filters/status/index';
//	import {listenner} from "@/utils/statuslistener" ;
	
	export default {
		components : {
			listTpml,
			addFZDialog,
		},
		data(){
			return {
				pageData : {
					pageTitle : "应用编排",
					filterOption : [
						{
							label : "编排名称", // label名
							paramsName : "name", // 出参name值
							defaultValue : "", // 出参默认值
							componentsName : "nameInput", // 
						},
					],
					// 列表table 设置
					listOption : {
						
						// 列表上部btn组
						listBtns : [{
							label : "创建应用编排",
							iconfont : "icon-folder-add",
							commandName : "addBP",
						},],
						// 列表api
						listApi : {
							serviceFN : list ,
						},
						// 表头设置
						header : [{
							label : "编排名称" ,
							propName : "name",
							align:"left",
						},
						{
							label : "应用模板数" ,
							propName : "templateCounts",
						},
						{
							label : "发布数" ,
							propName : "deployCounts",
							commandName : "goHistory",
						},
						{
							label : "创建者" ,
							propName : "creator",
						},
						{
							label : "创建时间" ,
							propName : "createTime",
						},{
							label : "操作" ,
							width : "",
							btns : [{
								label : "部署",
								commandName : "runBP",
								show:(row)=>{
									// 运行中
									return true ;
								}
							},{
								label : "详情",
								commandName : "goDetail",
							},{
								label : "删除",
								commandName : "deleteBP",
								show:(row)=>{
									// 已停止 || 异常
									return true ;
									// return row.status == 4 || row.status == 2 ;
								}
							},],
							btnGroups : []
						}]
					}
				}
			}
		},
		mounted(){
			
		},
		methods:{
			listCommand(command, row, index) {
				// console.log("列表进行了操作：", command,row,index );
				if (command && this[command]) {
					this[command](row, index);
				}
			},
			refresh(){
				this.$refs.listTpml.search();
			},
			addBP(){
				this.$router.push({
					path : "/bp/edit",
					query : {
						
					}
				})
			},
			goDetail(row,index){
				this.$router.push({
					path:"/bp/edit",
					query:{
						id : row.serviceTemplateId,
					},
				})
			},
			deleteBP(row,index){
				
				this.$confirm(`此操作将永久删除编排${row.name},是否继续?`, "删除编排", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning"
	      }).then(() => {
	        deleteOrchestrate({
	        	id: row.serviceTemplateId,
	        }).then((ret)=>{
	        	if(!ret.code){
	        		this.refresh();
	        	}
	        })
	      });
	      
			},
			runBP(row,index){
				this.$router.push({
					path:"/bp/edit",
					query:{
						id : row.serviceTemplateId,
						isDeploy : 1,
					},
				})
			},
			
			goHistory(row){
				if(row.deployCounts&&row.deployCounts.split("/")[0]!=0){
					this.$router.push({
						path : "/bp/gz",
						query : {
							serviceTemplateId : row.serviceTemplateId,
						}
					})
				}
			},
			
		}
	}
</script>

<style>
	
</style>